import React, { Component } from 'react'
import { Form, Input, Button, Card, message } from 'antd'
import { UserOutlined, TranslationOutlined } from '@ant-design/icons'
import { login } from 'api/user'
import { SHA256 } from '../../SHA256'
import { setToken } from 'utils/storage.js'
import logo from '../../assets/logo.png'
import './index.scss'

export default class Login extends Component {
  state = {
    userInfo: {},
  }

  // 登录
  onFinish = async (values) => {
    // console.log(values)
    const userMessage = {
      username: values.username,
      password: SHA256(values.password),
    }
    try {
      const res = await login(userMessage) // 发送请求 拿到token
      console.log(res)
      message.success('登录成功') // 成功提示
      setToken(JSON.stringify(res)) // 存token
      // console.log(this.props.history);
      this.props.history.push('/home') // 页面跳转
    } catch (error) {
      message.error('登陆失败')
    }
  }

  // 获取用户信息userInfo
  // getUserInfo = () => {
  //   this.setState({
  //     userInfo: {}
  //   })
  // }

  render() {
    return (
      <div className="login">
        <div className="bgi">
          <Card className="loginBox">
            <Form
              name="basic"
              validateTrigger={['onBlur', 'onChange']}
              initialValues={{
                // 设置默认值
                username: 'root@admin.com',
                password: '123456',
              }}
              autoComplete="off"
              onFinish={this.onFinish}
            >
              {/* 表单logo */}
              <div className="boxTop">
                <div className="boxLogo">
                  <img src={logo} alt="" className="loginLogo" />
                  <span className="topText">用户登录</span>
                </div>
                <i style={{ fontSize: '20px' }}>
                  <TranslationOutlined />
                </i>
              </div>
              <Form.Item
                name="username"
                prefix={<UserOutlined />}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                  {
                    pattern:
                      /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/,
                    message: '手机号格式不正确',
                  },
                ]}
              >
                <Input size="large" />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                  {
                    pattern: /^[0-9]{6}$/,
                    message: '验证码格式不正确',
                  },
                ]}
              >
                <Input.Password size="large" />
              </Form.Item>

              <Form.Item>
                <Button
                  style={{ lineHeight: '0px' }}
                  className="btn"
                  type="primary"
                  htmlType="submit"
                  size="large"
                  block
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    )
  }
}
